UX Strategy: Study Guide如何使用情緒板及其重要性
概要:情緒板(Mood Board)可以用於收集視覺靈感,傳達品牌形象,幫助確定產品的視覺方向。情緒板是一種由影象、影片片段、圖案或文字組成的拼貼畫,可以一目瞭然地傳遞某種感覺。情緒板廣泛應用於品牌設計、平面設計、時尚設計、電影、工業和室內設計等領域,有時也用於非視覺領域(如音樂和香水設計)以捕捉特定情緒。
為什麼在UX或UI設計中使用情緒板(Why Use Mood Boards for UX or UI Design)
在使用者體驗(UX)設計中,情緒板用於直觀展示數字產品應傳遞的情感和價值。即使不具備設計經驗的人也能透過情緒板瞭解產品的視覺基調。
示例:如果團隊正在為城市建設工人開發一款職業應用,目標視覺效果可能包含如下關鍵詞:
- 激勵人心(Motivational)
- 充滿活力(Energetic)
- 明亮(Bright)
使用包含工人照片、城市場景、藍黃配色的情緒板可為團隊提供直觀的設計方向。情緒板通常用於定義主要UI色彩和視覺設計身份,但它還可以包括其他設計元素,如語氣詞、市場營銷理念、互動設計模式及其他產品的靈感截圖。

情緒板幫助團隊:
- 透過集中靈感收集產生設計思路
- 快速傳遞產品基調
- 對設計方向達成一致
情緒板的協作性較強,可以同步或非同步地由多方共同建立。
建立情緒板的時機(When to Create Mood Boards)
情緒板通常在新產品設計初期或現有產品的重大改版階段建立。它們在設計思維的定義(Define)或構思(Ideate)階段尤其有效,能在設計師開始製作原型前,幫助達成視覺風格共識。情緒板的建立可以由任何團隊成員發起,通常由使用者介面設計師、視覺設計師或互動設計師主導,涉及產品負責人和內容管理者等利益相關者。建議建立多個情緒板,以便從不同情緒中選擇最合適的方向。


如何建立和使用情緒板(How to Create and Use Mood Boards)
建立情緒板的步驟如下:
- 審查現有材料(Review Existing Materials)
參考品牌或產品的現有風格指南,以確保情緒板與公司形象一致。
- 選擇工具(Select the Tool)
根據需求選擇製作情緒板的工具,可以選擇物理情緒板或數字情緒板。
- 物理情緒板:適合偏好動手操作的團隊,利用白板或泡沫板製作,但不適合遠端團隊,且共享和儲存較困難。
- 數字情緒板:可透過Miro、Mural、FigJam等協作工具,方便遠端和團隊協作。

各種專業人士在 FigJam 上合作製作情緒板。
- 選擇情緒基調(Choose the Moods)
根據產品及使用者需求選擇合適的情緒。與創意專業人士探討並記錄下描述產品的關鍵詞,透過字典或思維導圖選擇最符合的4–5個關鍵詞,作為情緒板的基礎。

用便利貼將幾個情緒詞及其同義詞分組。這些詞是建立情緒板的基礎。
- 收集視覺資源(Collect the Visuals)
收集能反映情緒的各種視覺素材,包括影象、插畫、影片幀、圖案和文字。資源可來源於Google圖片、社交媒體、Pinterest等平臺。在收集時,注意主題統一性,避免矛盾的風格混搭。如果有多個視覺概念,建議建立獨立的情緒板。

各種影象、排版和使用者介面設計資源被儲存在一個共享的 Pinterest 板上,作為與一個未來主義且充滿活力的舞蹈平臺相關的情緒板的素材。 
大量收集螢幕截圖和示例可能會使情緒板偏向於功能而不是特定的情緒。這個示例更適合用於“競爭分析板”或參考板,而不是情緒板。
- 排列視覺素材(Arrange the Visuals)
確定每個元素的重要性,優先展示能最好傳遞情緒的素材。關鍵素材可以放大或放置在情緒板中央。利用留白來區分不同元素,使情緒板更整潔。

同樣的一組視覺元素可以以不同的方式排列,以略微不同的方式傳達資訊。左邊的板子注重顏色和圖案,而右邊的板子突出文字。
- 分享情緒板(Share the Board)
若獨立建立情緒板,建議讓團隊反饋或提出建議。若是協作建立的情緒板,將其分享給團隊其他成員並清晰傳達選擇情緒和視覺的理由。如果團隊成員分別建立了情緒板,可以將所有情緒板放在一起對比,透過便籤顏色編碼進行反饋,以幫助最終確定情緒板。

一個在情緒板上直接用便利貼交換反饋的示例。
結論(Conclusion)
情緒板是一種匯聚多種視覺特徵、嘗試不同設計風格並決定產品整體視覺和情感方向的有效方式。透過遵循這些概念,情緒板可以在設計過程中為團隊提供適當的指導。